<template>
  <div class="warper">
    <div class="daohan">
      <dao-han :daohan_index="2"></dao-han>
    </div>
    <div class="content">
      <p :class="active==1?'active':''"
         @click="daohan(1)">宠物列表</p>
      <p :class="active==2?'active':''"
         @click="daohan(2)">领养审核</p>
      <p :class="active==3?'active':''"
         @click="daohan(3)">领养记录</p>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>



<script>
import { onMounted, ref } from 'vue'
import DaoHan from '@/components/daohan/DaoHan.vue'
import { useRouter } from 'vue-router'
export default {
  components: {
    DaoHan
  },
  setup() {
    const router = useRouter()
    let active = ref(1)
    const daohan = (index) => {
      active.value = index
      if (index == 1) {
        router.replace('/adopt')
      } else if (index == 2) {
        router.replace('/adopt/shenhe')
      } else {
        router.replace('/adopt/lyjilu')
      }
    }
    onMounted(() => {
      active.value = 1
      if (active.value == 1) {
        router.replace('/adopt')
      }
    })

    return {
      active,
      daohan
    }
  }
}
</script>

<style scoped lang="less">
.warper {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  // padding-top: 80px;
  .content {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    p {
      width: 280px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 20px;
      font-weight: 700;
      cursor: pointer;
      margin: 0 10px;
      background-color: #eeecde;
      border-bottom: #cdbf62 3px solid;
      border-top: #cdbf62 1px dashed;
      border-left: #cdbf62 1px solid;
      border-right: #cdbf62 1px solid;
      border-radius: 15px;
      &:hover {
        background-color: #eee;
      }
    }
    .active {
      width: 280px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 20px;
      font-weight: 700;
      cursor: pointer;
      margin: 0 10px;
      background-image: radial-gradient(ellipse, #eeecde, #cdbf62);
      border-bottom: #cdbf62 3px solid;
      border-top: #cdbf62 1px dashed;
      border-left: #cdbf62 1px solid;
      border-right: #cdbf62 1px solid;
      border-radius: 15px;
    }
  }
}
.daohan {
  width: 100vw;
  position: fixed;
  top: 0;
  z-index: 3;
}
</style>

